<template>
  <div>
    <el-row>
      <el-col :span="12">
        <span class="demonstration">商品分类：</span>
        <el-dropdown trigger="click" szie="medium" @command="checkTypeName">
          <span class="el-dropdown-link">
            {{ typeName }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="蔬菜">蔬菜</el-dropdown-item>
            <el-dropdown-item command="水果">水果</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
    <el-row>
      <el-col class="product-box" :span="4" v-for="(item, index) in products" :key="index">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <img :src="item.image" class="image" :title="item.name" :alt="item.name" />
          <div style="padding: 14px;">
            <span class="product-title" :title="item.name">{{item.name}}</span>
            <div class="bottom clearfix">
              <span class="price">
                ￥
                <label>{{ item.price }}</label>
              </span>
            </div>
          </div>
          <el-button type="warning" class="button" @click="addToCart(item)">加入购物车</el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
export default {
  name: "ProductList",
  data() {
    return {
      typeName: "分类",
    };
  },
  computed: {
    ...mapState("products", ["products"]),
  },
  methods: {
    ...mapActions("products", ["getAllProducts"]),
    ...mapMutations('cart', ['addToCart']),
    checkTypeName(command) {
      if (this.typeName !== command) {
        this.typeName = command;
        this.getAllProducts(command);
      }
    },
  },
  created() {
    this.getAllProducts("");
  },
};
</script>

<style>
.product-box {
  margin: 1% 4.15% 1% 0;
}
.product-box:nth-child(5n) {
  margin-right: 0;
}
.product-title {
  display: inline-block;
  width: 98%;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.price {
  font-size: 10px;
  color: #ff0000;
}
.price label {
  font-size: 16px;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  width: 100%;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>